<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:tnt="http://uce.tour/components">
     
    
<h:head>
<style>
body {
	background: #333 repeat top left;
	font-family: Arial;
}

span.reference {
	position: fixed;
	left: 10px;
	bottom: 10px;
	font-size: 12px;
	align: center;
}

span.reference a {
	color: #aaa;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
	margin-right: 30px;
}

span.reference a:hover {
	color: #ddd;
}

ul.menu_tour {
	margin-top: 75px;
}

h1.title {
	text-indent: 100px;
	background: transparent no-repeat top left;
	width: 633px height:0px;
}

.iconcargo .ui-menuitem-icon .ui-icon {
	background: url('../resources/images/2.jpg') no-repeat !important;
	height: 16px;
	width: 16px;
}
</style>
	<script type="text/javascript">
            $(function() {
				/**
				* for each menu element, on mouseenter, 
				* we enlarge the image, and show both sdt_active span and 
				* sdt_wrap span. If the element has a sub menu (sdt_box),
				* then we slide it - if the element is the last one in the menu
				* we slide it to the left, otherwise to the right
				*/
                $('#menu_tour > li').bind('mouseenter',function(){
					var $elem = $(this);
					$elem.find('img')
						 .stop(true)
						 .animate({
							'width':'170px',
							'height':'170px',
							'left':'0px'
						 },400,'easeOutBack')
						 .andSelf()
						 .find('.menu_tour_wrap')
					     .stop(true)
						 .animate({'top':'140px'},500,'easeOutBack')
						 .andSelf()
						 .find('.menu_tour_active')
					     .stop(true)
						 .animate({'height':'170px'},300,function(){
						var $sub_menu = $elem.find('.menu_tour_box');
						if($sub_menu.length){
							var left = '170px';
							if($elem.parent().children().length == $elem.index()+1)
								left = '-170px';
							$sub_menu.show().animate({'left':left},200);
						}	
					});
				}).bind('mouseleave',function(){
					var $elem = $(this);
					var $sub_menu = $elem.find('.menu_tour_box');
					if($sub_menu.length)
						$sub_menu.hide().css('left','0px');
					
					$elem.find('.menu_tour_active')
						 .stop(true)
						 .animate({'height':'0px'},300)
						 .andSelf().find('img')
						 .stop(true)
						 .animate({
							'width':'0px',
							'height':'0px',
							'left':'85px'},400)
						 .andSelf()
						 .find('.menu_tour_wrap')
						 .stop(true)
						 .animate({'top':'25px'},500);
				});
            });
        </script>

</h:head>
<h:body>
	<h:form id="menuForm">
		<table>
		<tr><td>
		<tnt:menuSlide model="#{menuBean.model}"></tnt:menuSlide>
		</td></tr>
		</table>

	</h:form>
</h:body>
</html>